Add column filters component #821
Conversation
* Add slots: - table-actions-header - table-actions-global-search - table-actions-dropdown
| background-color: red; | ||
| } | ||
|
|
||
| #vgt-root >>> { |
There was a problem hiding this comment.
I tried applying a little example styling. But it won't work.
I'm not used to using scss, so maybe I foobar'd there?
|
@xaksis can I get some feedback on this one? |
|
hey @p0psicles. Yeah, I've looked this over but I'm trying to think about how we can make this an optional include. Basically, create an infrastructure for table plugins. (I know I've discussed this in the past) This is a prefect use-case for it. I haven't had a chance to explore it in detail yet though... would be happy to get some help. |
|
Ohh I've also never done anything like this. Wouldn't know where to start tbh |
|
Ha! I'm in the same boat. I'm taking the next week off (after a LOOONG time) will try and come up with something. |
|
IMO it's already an optional component. the UI component is a separate vue component. Which can be optionally used. Would you want to create and maintain separate plugin repo's for plugins? Like have a user need to do yarn add vgt-plugin-column-filter? |
|
I wouldn't. You would! The idea is to democratize the eco-system around the table. So people can make/maintain their own extensions, with the base being a lean VGT with core functionalities. That'd be a decent way to scale, without one person becoming the bottleneck for multiple extensions. What do you think? |
|
Yeah sounds nice. Little bit idealistic. I think we'd need to start to start with an existing feature and flesh that out. And preferably have vgt offer an api that can be used by the plugin. But again. No idea how. But I'm always up for learning new stuff. Plus I really need a number of features. As running my fork is a pita. As I need to rebase and resolve conflicts with each release. |
|
Doing some thinking. Maybe vue 3 composition api could help here. |
|
@xaksis I'm giving it a go using scoped slots. |
| @@ -0,0 +1,53 @@ | |||
| <template> | |||
There was a problem hiding this comment.
@xaksis I think this is the best we can do to separate features from the core functionality.
My idea was to create a plugins folder, and add some "example" components there, and expose these to the user.
We could create cookbook section in de docs, that explains this.
Imo I think we should gradually move some of the components to the plugins folder. So the user can use those, extend from it. Or drop in something entirely different.
If you want to move to something that's for ex renderless, that's possible. But that would require a total rewrite. And imo I think Vue3's composition API could shine there. Abstracting out render related functions.
I think you can decrease maintenance costs, by utilizing scoped slots more, and having some example components in plugins. That way, you could put the MVP in plugins, while offering a lot of flexibility to the user.
| @@ -37,11 +41,17 @@ | |||
| {{props.formattedRow[props.column.field]}} | |||
| </span> | |||
| </template> --> | |||
|
|
|||
| <template v-slot:table-actions-dropdown="{columns}"> | |||
There was a problem hiding this comment.
Three lines to utilize the column filter, but a user can drop-in his own component if he likes.
|
@xaksis if you could give me some feedback I'm willing to do some work on this |
|
This requires more thinking through. I will update here when I have some time to work through it. |
|
Sure. tnx for the update |
|
It has been a few weeks. Any update on this? |
Use a column filter by using the vgt option:
:column-filter-options="{ enabled: true }"